import { Select, Tabs, Row, Col, Form, Button, message } from "antd";
import { addon, Permission } from "pao-aop";
import { reactControl, ReactView, ReactViewControl, ReactViewState } from "pao-aop-client";
import React from "react";
import FormCreator, { InputType } from "src/business/components/buss-components/form-creator";
// import { GetFieldDecoratorOptions } from "antd/lib/form/Form";
// import { TableList, InputTypeTable } from "src/business/components/buss-components/table-list";
import SignFrameLayout from "src/business/components/buss-components/sign-frame-layout";
import { MainContent } from "src/business/components/style-components/main-content";
import { AppServiceUtility } from 'src/projects/app/appService';
import { table_param } from "src/projects/app/util-tool"; // isPermission,
import { request } from "src/business/util_tool";
import { MainCard } from "src/business/components/style-components/main-card";
import TextArea from "antd/lib/input/TextArea";

// import { request_func } from "src/business/util_tool";
const { TabPane } = Tabs;
/**
 * 组件：服务记录详情编辑状态
 */
export interface ChangeServiceRecordViewState extends ReactViewState {
    /** 基础数据 */
    base_data?: any;
    /** 服务项目 */
    service_project_list?: any[];
    /** 服务人员 */
    service_worker_list?: any[];
    /** 选项清单 */
    option_list?: any;
    /** 服务选项 */
    loading?: boolean;
    /** 服务评价 */
    service_evaluate?: any;
    evaluate?: any;

    // application_scope?: any[];
    // 数据详情
    data_info?: any;
    // 是否已回访
    is_huifang?: any;
}

/**
 * 组件：服务记录详情视图
 */
export class ChangeServiceRecordView extends ReactView<ChangeServiceRecordViewControl, ChangeServiceRecordViewState> {

    constructor(props: any) {
        super(props);
        this.state = {
            service_project_list: [],
            service_worker_list: [],
            option_list: {},
            service_evaluate: {},
            evaluate: [],
            data_info: [],
            is_huifang: '是',
        };
    }
    /** 确定回调 */
    handleSubmit = (e: any) => {
        e.preventDefault();
        const { form } = this.props;
        let { data_info, is_huifang } = this.state;
        form!.validateFields((err: Error, values: any) => {
            if (!err) {
                if (is_huifang === '是') {
                    message.error('已经有回访内容');
                    return;
                }
                let param: any = {
                    id: data_info.id,
                    is_huifang: '是',
                    huifang_content: values['huifang_content'],
                };
                request(this, AppServiceUtility.service_record_service.update_service_record!(param))
                    .then((datas: any) => {
                        if (datas === 'Success') {
                            message.info('保存成功');
                            history.back();
                        } else {
                            message.info(datas);
                        }
                    })
                    .catch((error: any) => {
                        message.error(error);
                    });
            }
        });
    }

    returnBtn = () => {
        this.props.history!.goBack();
    }

    componentDidMount() {
        // const param = [{ id: this.props.match!.params.key }, 1, 1];
        // request_func(this, AppServiceUtility.service_record_service['get_service_record_list'], param, (data: any) => {
        //     console.info(data);
        //     let evaluate: any = [];
        //     console.info(data.result[12]._evaluate_list);
        //     data.result[12]._evaluate_list!.map!((item: any, index: Number) => {
        //         evaluate.push(<Option key={item.id}>{item.evaluate_list}</Option>);
        //     });
        //     this.setState({ evaluate, service_evaluate: data.result[12] });
        // });

        AppServiceUtility.services_project_service.get_services_project_list!({})!
            .then((data: any) => {
                if (data) {
                    let service_project = data.result.map((key: any, value: any) => {
                        return <Select.Option key={key.id}>{key.name}</Select.Option>;
                    });
                    this.setState({
                        service_project_list: service_project
                    });
                }
            });
        AppServiceUtility.person_org_manage_service.get_personnel_worker!({})!
            .then((data: any) => {
                if (data) {
                    let worker = data.result.map((key: any, value: any) => {
                        return <Select.Option key={key.id}>{key.name}</Select.Option>;
                    });
                    this.setState({
                        service_worker_list: worker
                    });
                }
            });

        if (this.props.match!.params.key) {
            request(this, AppServiceUtility.service_record_service.get_service_record_list_all!({ id: this.props.match!.params.key }, 1, 1))
                .then((datas: any) => {
                    let data_info = datas.result && datas.result[0] ? datas.result[0] : [];
                    this.setState({
                        data_info,
                        is_huifang: data_info.hasOwnProperty('is_huifang') ? data_info['is_huifang'] : '否'
                    });
                });
        }

    }
    render() {
        let layout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 },
            },
        };
        let edit_props = {
            // row_btn_props: {
            //     style: {
            //         justifyContent: " center"
            //     }
            // },
            form_items_props: [
                {
                    title: "服务记录信息",
                    need_card: true,
                    input_props: [
                        {
                            one_row_inputs: {
                                inputs_props: [
                                    {
                                        type: InputType.select,
                                        col_span: 8,
                                        label: "服务项目",
                                        decorator_id: "service_project_id",
                                        layout: layout,
                                        option: {
                                            childrens: this.state.service_project_list,
                                            disabled: true
                                        }
                                    }, {
                                        type: InputType.select,
                                        col_span: 8,
                                        label: "服务人员",
                                        decorator_id: "service_worker_id",
                                        layout: layout,
                                        option: {
                                            childrens: this.state.service_worker_list,
                                            disabled: true
                                        }
                                    }, {
                                        type: InputType.antd_input,
                                        col_span: 8,
                                        label: "计价金额",
                                        decorator_id: "valuation_amount",
                                        layout: layout,
                                        option: {
                                            disabled: true
                                        }
                                    }, {
                                        type: InputType.date,
                                        col_span: 8,
                                        label: "服务开始时间",
                                        decorator_id: "start_date",
                                        layout: layout,
                                        option: {
                                            disabled: true
                                        }
                                    }, {
                                        type: InputType.date,
                                        col_span: 8,
                                        label: "服务结束时间",
                                        decorator_id: "end_date",
                                        layout: layout,
                                        option: {
                                            disabled: true
                                        }
                                    },
                                ]
                            }
                        },
                    ]
                },
                {
                    title: "服务内容",
                    need_card: true,
                    input_props: [
                        {
                            one_row_inputs: {
                                inputs_props: [
                                    {
                                        type: InputType.upload,
                                        col_span: 8,
                                        label: "服务开始图片",
                                        decorator_id: "task_begin_photo",
                                        layout: layout,
                                        option: {
                                            disabled: true
                                        }
                                    }, {
                                        type: InputType.upload,
                                        col_span: 8,
                                        label: "服务结束图片",
                                        decorator_id: "task_end_photo",
                                        layout: layout,
                                        option: {
                                            // src:''
                                            disabled: true
                                        }
                                    }, {
                                        type: InputType.text_area,
                                        col_span: 8,
                                        label: "文字记录",
                                        decorator_id: "text_records",
                                        layout: layout,
                                        option: {
                                            disabled: true
                                        }
                                    }
                                ]
                            }
                        }
                    ]
                },
                {
                    title: "服务订单信息",
                    need_card: true,
                    input_props: [
                        {
                            one_row_inputs: {
                                inputs_props: [
                                    {
                                        type: InputType.antd_input,
                                        col_span: 8,
                                        label: "服务订单编号",
                                        decorator_id: "service_order_code",
                                        layout: layout,
                                        option: {
                                            disabled: true
                                        }
                                    }, {
                                        type: InputType.antd_input,
                                        col_span: 8,
                                        label: "服务商",
                                        decorator_id: "service_provider_name",
                                        layout: layout,
                                        option: {
                                            disabled: true
                                        }
                                    }, {
                                        type: InputType.antd_input,
                                        col_span: 8,
                                        label: "采购人",
                                        decorator_id: "purchaser_name",
                                        layout: layout,
                                        option: {
                                            disabled: true
                                        }
                                    }
                                ]
                            }
                        },
                    ]
                },
            ],
            service_option: {
                service_object: AppServiceUtility.service_record_service,
                operation_option: {
                    query: {
                        func_name: "get_service_record_list_all",
                        arguments: [{ id: this.props.match!.params.key }, 1, 1]
                    },
                    save: {
                        func_name: "update_service_item"
                    }
                },
            },
            succ_func: () => { this.props.history!.goBack(); },
            id: this.props.match!.params.key,
        };
        const columns_data_option = [{
            title: '选项名称',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '选项值',
            dataIndex: 'value',
            key: 'value',
        }, {
            title: '说明',
            dataIndex: 'explain',
            key: 'explain',
        }, {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
        },];
        const option_list = {
            loading: this.state.loading,
            type_show: false,
            columns_data_source: columns_data_option,
            // on_icon_click: this.onIconClick,
            service_object: AppServiceUtility.service_record_service,
            service_option: {
                select: {
                    service_func: 'get_record_option_list',
                    service_condition: [{ id: this.props.match!.params.key }, 1, 10]
                },

            },
        };
        // 服务评价
        const columns_data_evaluate = [{
            title: '评价人',
            dataIndex: 'comment_user',
            key: 'evaluator_id',
        }, {
            title: '评分内容',
            dataIndex: 'content',
            key: 'content',
        }, {
            title: '评分等级',
            dataIndex: 'level',
            key: 'level',
        }, {
            title: '评价时间',
            dataIndex: 'comment_date',
            key: 'comment_date',
        },];
        const service_evaluate = {
            loading: this.state.loading,
            type_show: false,
            columns_data_source: columns_data_evaluate,
            // on_icon_click: this.onIconClick,
            service_object: AppServiceUtility.service_record_service,
            service_option: {
                select: {
                    service_func: 'get_record_evaluate_list',
                    service_condition: [{ record_id: this.props.match!.params.key }, 1, 10]
                },

            },
        };
        Object.assign(service_evaluate, table_param);
        Object.assign(option_list, table_param);
        let { data_info, is_huifang } = this.state;
        const { getFieldDecorator } = this.props.form!;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        return (
            <Tabs defaultActiveKey="1" >
                <TabPane >
                    <MainContent>
                        <FormCreator {...edit_props} />
                    </MainContent>
                    <MainContent>
                        <SignFrameLayout {...option_list} />
                    </MainContent>
                    <MainContent>
                        <SignFrameLayout {...service_evaluate} />
                    </MainContent>
                    <MainContent>
                        <SignFrameLayout {...service_evaluate} />
                    </MainContent>
                    <MainContent>
                        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                            <MainCard title='回访'>
                                <Row type="flex" justify="center">
                                    <Col span={12}>
                                        <Form.Item label='回访内容'>
                                            {getFieldDecorator('huifang_content', {
                                                initialValue: data_info['huifang_content'] ? data_info['huifang_content'] : '',
                                                rules: [{
                                                    required: true,
                                                    message: '请输入回访内容',
                                                }],
                                            })(
                                                <TextArea disabled={data_info['task_state'] !== '已完成' || is_huifang === '是' ? true : false} />
                                            )}
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </MainCard>
                            <MainCard>
                                <Row type="flex" justify="center" className="ctrl-btns">
                                    <Button htmlType='submit' type='primary' disabled={data_info['task_state'] !== '已完成' || is_huifang === '是' ? true : false}>保存</Button>
                                </Row>
                            </MainCard>
                        </Form>
                    </MainContent>
                </TabPane>
            </Tabs>
        );
    }
}

/**
 * 控件：服务记录详情控件
 * @description 服务记录详情控件
 * @author
 */
@addon('ChangeServiceRecordtView', '服务记录详情控件', '服务记录详情控件')
@reactControl(Form.create<any>()(ChangeServiceRecordView), true)
export class ChangeServiceRecordViewControl extends ReactViewControl {
    /** 视图权限 */
    public permission?: Permission;

}